<template>
	<view class="video-page">
		<!-- 顶部选项卡 -->
		<scroll-view scroll-x="true" class="scroll-row border-bottom" style="height: 80rpx;" scroll-with-animation="true" >
			<view
				v-for="(item, index) in titleList"
				:key="index"
				class="scroll-row-item mx-3"
				:data-id="item.channelId"
				@click="switchTab(index,item.channelId)"
				:class="tabIndex === index ? 'nav-bottom-select' : ''"
				style="height: 74rpx;line-height: 74rpx;"
			>
				<text class="font-md">{{ item.channelName }}</text>
			</view>
		</scroll-view>
		<swiper :current="tabIndex" :style="'height:' + scrollH + 'px;margin:10px 15px 0'" @change="swiperChange">
			<swiper-item v-for="(item, index) in titleList" :key="index">
				<scroll-view scroll-y="true" @scrolltolower="loadMore" :style="'height:' + scrollH + 'px;'">
					<view class="d-flex flex-column" v-if="index === tabIndex">
						<!-- 加载中 -->
						<template>
							<view v-show="isShowLoading" class="" :style="'height:' + scrollH + 'px;'">
								<image src="../../static/images/loading.gif" style="height: 750upx;width: 750upx;"></image>
							</view>
						</template>
						
						<view v-show="!isShowLoading" v-for="(item, idx) in mainContentList" :key="idx">
							
						    <view class="video-content">
						      <video class="video-item" object-fit=fiil controls=false :src="item.media"></video>
						      <view class="video-title font-32 px-3">{{item.title}}</view>
							  <view class="video-releaseDataDes font-28 px-3">{{item.releaseDataDes}}</view>
						      </view>
							<view class="d-flex a-center j-end" style="height: 72upx">
								<view class="d-flex a-center">
									<view class="ml-3 oper-item">
										<!-- <text class="iconfont icon-pinglun2 icon-flag"></text> -->
										<image style="width: 30upx;height: 30upx;" src="../../static/tabbar/pingl.png"></image>
										<text class="font-23" style="margin-left: 10upx;">{{item.commentCount}}</text>
									</view>
									<view class="ml-3 oper-item">
										<!-- <text class="iconfont icon-dianzan1 icon-flag"></text> -->
										<image style="width: 38upx;height: 38upx;" src="../../static/tabbar/dz.png"></image>
										<text class="font-23" style="margin-left: 10upx;">{{item.customViews}}</text>
									</view>
									<view class="ml-3 oper-item" @tap="shareVideo">
										<!-- <image style="width: 40upx;height: 40upx;" src="../../static/images/estate/concern.png"></image> -->
										<text class="iconfont icon-icon_zhuanfa icon-flag"></text>
									</view>
								</view>
								<!-- <view class="iconfont icon-xiala- mr-2" style="font-size: 40upx;"></view> -->
							</view>
						</view>
						<!-- 加载更多 -->
						<view class="d-flex a-center j-center font-md py-2">{{ currentLoadText }}</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import api from '@/common/lib/request.js';
	export default {
		data() {
			return {
				dataList: [],
				tabIndex: 0,
				scrollH: 600,
				currentPageNo: 1,
				mainContentList: [],
				currentSite: 1,
				videoType: 0,
				currentLoadText: '上拉加载更多',
				loadStatus: ['上拉加载更多', '加载中', '没有更多了'],
				titleList: [
					{
						channelId: 0,
						channelName: '全部'
					},
					{
						channelId: 1,
						channelName: '直播'
					},
					{
						channelId: 2,
						channelName: '一线'
					},
					{
						channelId: 4,
						channelName: '会客厅'
					},
					{
						channelId: 5,
						channelName: '围观'
					}
				]
			}
		},
		components:{
			
		},
		onLoad() {
			uni.getSystemInfo({
				success: res => {
					this.scrollH = res.windowHeight - uni.upx2px(82);
				}
			});
			this.__initVideoContentList(1)
		},
		methods: {
			__initVideoContentList(pageNo){
				const _this = this;
				console.log(pageNo,"jjj")
				if (pageNo === 1) {
					this.isShowLoading = true;
				}
				api.request({
					url: '/channel/video/child/contents',
					data: {
						page: pageNo,
						siteId: this.currentSite,
						type: this.videoType
					}
				})
					.then(response => {
						if (response.length > 0) {
							_this.mainContentList = _this.mainContentList.map(item => {
								return {
									title: item.title,
									srcList: [{title:"",src:item.media}]
								}
							})
							_this.currentPageNo++;
							_this.mainContentList = [..._this.mainContentList, ...response];
							_this.currentLoadText = _this.loadStatus[0];
							_this.isShowLoading = false;
						} else {
							_this.currentLoadText = _this.loadStatus[2];
							_this.isShowLoading = false;
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			switchTab(index,channelId) {
				console.log(111)
				if (index === this.tabIndex) {
					return;
				}
				this.videoType = channelId;
				this.mainContentList = [];
				this.currentPageNo = 1;
				this.tabIndex = index;
				this.__initVideoContentList(this.currentPageNo)
			},
			swiperChange(e) {
				let channelId = this.titleList[e.detail.current].channelId;
				this.switchTab(e.detail.current,channelId);
			},
			shareVideo(){
				
			}
		}
	}
</script>

<style>
	.video-page{
		margin-top: 50upx;
	}
.video-item{
	width: 100%;
	height: 450upx;
}
.nav-bottom-select{
	border-bottom: 10upx solid #005BAC;
}
.video-content{
	width: 100%;
	position: relative;
	text-align: center;	
}
.video-title{
	
	position: absolute;
	left: 30upx;
	right:30upx;
	bottom: 70upx;
	color: #ffffff;	
	padding-right: 30upx;
	
}
.video-releaseDataDes{
	width: 90%;
	position: absolute;
	bottom:30upx;
	color: #ffffff;	
	
}
.oper-item{
	margin-left: 30upx;
	display: flex;
	align-items: center;
}
.icon-flag{
	font-size: 28upx !important;
	margin-right: 5upx;
}
</style>
